<script setup>
import { ref, reactive, computed, onMounted, onUpdated } from 'vue';
import { getLoggerApi } from '@/api/logger'
import { useUserStore } from "@/stores/counter";
import { showMessage, timestampToTime,showNetError } from '@/public/public'



//请求到数据总条数 不是每一页的条数
const totalCount = ref(0);

let tableData = reactive([]);

//定义列表每页显示的条数
let pageSize = 10;
// 默认从第一页显示
let currentPage = ref(1);

//记住上次点击的分页
let last_page = 1;


const userStore = useUserStore();
const userMsg = computed(() => {
    return userStore.userMsg;
})
const token = userStore.userMsg.token;


onMounted(() => {
    queryLoggerData();
})


// 以下为分页功能
//page-size 改变时触发
function change_size(val) {
    console.log('change_size', val);
    currentPage.value = val;

    if(startDate.value){
        if(endDate.value){
            queryLoggerData();
        }else{
            currentPage.value = last_page;
            showMessage('请选择截止日期后查看日志列表数据','error', 2000);
            return;
        }
    }else{
        if(endDate.value){
            currentPage.value = last_page;
            showMessage('请选择开始日期后查看日志列表数据','error', 2000);
            return;
        }else{
            queryLoggerData();
        }
    }
}
//current-page 改变时触发	
function change_current(val) {
    console.log('change_current', val);
    currentPage.value = val;
    if(startDate.value){
        if(endDate.value){
            queryLoggerData();
        }else{
            currentPage.value = last_page;
            showMessage('请选择截止日期后查看日志列表数据','error', 2000);
            return;
        }
    }else{
        if(endDate.value){
            currentPage.value = last_page;
            showMessage('请选择开始日期后查看日志列表数据','error', 2000);
            return;
        }else{
            queryLoggerData();
        }
    }
}
//用户点击上一页按钮改变当前页时触发	
function click_prev() {
    // console.log('click_prev');
}
//用户点击下一页按钮改变当前页时触发
function click_next() {
    // console.log('click_next');
}


const size = ref('default')
const startDate = ref('')
const endDate = ref('')
const disabledDate = (time) => {
    return time.getTime() > Date.now()
}

function pickupStartDate(val) {
    // console.log('------',  val);
    // console.log( timestampToTime(val));
    if (val) {
        // console.log('---',  val.getTime());
        startDate.value = val.getTime();
    }
}
function pickupEndDate(val) {
    // console.log('+++++',  val);
    // console.log( timestampToTime(val));
    if (val) {
        console.log('+++',  val.getTime());
        endDate.value = val.getTime();
    }
}
//点击 查询按钮
function queryLoggerClick() {

console.log('--888--', startDate.value , endDate.value);

    //如果都没有传值 请求所有数据
    if (!startDate.value && !endDate.value) {
        //点击查询按钮后请求数据
        currentPage.value = 1;
        queryLoggerData();
        return;
    }
    if (!startDate.value && endDate.value) {
        showMessage('请输入开始日期！', 'error', 2000);
        return;
    }
    if (startDate.value && !endDate.value) {
        showMessage('请输入截止日期！', 'error', 2000);
        return;
    }
    if (startDate.value && endDate.value) {
        if (startDate.value > endDate.value) {
            showMessage('请输入正确的截止日期，截止日期应小于开始日期！', 'error', 3000);
            return;
        } else {
            //点击查询按钮 后请求数据
            currentPage.value = 1;
            queryLoggerData();
            return;
        }
    }
}

function queryLoggerData() {
    const  obj = {};
    if(startDate.value){
        obj.token = token;
        obj.currentPage = currentPage.value - 1,
        obj.pageSize = pageSize;
        obj.startDate = startDate.value;
        //增加一天时间
        obj.endDate = endDate.value + 86400000;
    }else{
        obj.token = token;
        obj.currentPage = currentPage.value - 1,
        obj.pageSize = pageSize;
        obj.startDate = 0;
        obj.endDate = 0;
    }
    getLoggerApi(obj).then(res => {
        console.log('-----++++++++++------',   res);
        const resData = res.data;
        totalCount.value = resData.totalCount;
        tableData.splice(0);
        if (resData.code === 1) {
            last_page = currentPage.value;
            const loggerData = resData.data;
            let num = (currentPage.value - 1) * pageSize;

            console.log('==-------------------===', currentPage.value - 1);

            loggerData.forEach(val => {
                tableData.push({
                    orderNum: ++num,
                    id: val.id,
                    username: val.username,
                    accountId: val.accountId,
                    operate: val.operate,
                    operateTime: timestampToTime(val.operateTime),
                    ipAddress: val.ipAddress.length >7 ? val.ipAddress.slice(7) : "",
                });
            });
            console.log('---查询后页面需要刷新的数据---', tableData);
        }
    }).catch(res=>{
        currentPage.value = last_page;
        showNetError(res);
    })
}


</script>

<template>
    <div>
        <div class="logger-header">
            <h3>日志列表</h3>
        </div>

        <div class="date-picker-box">
            <div class="date-picker-start">
                <span class="date-picker-start-title">时间范围：从</span>
                <el-date-picker style="width: 160px;" class="date-picker-input" v-model="startDate" type="date"
                    placeholder="请选择开始时间" :size="size" :disabled-date="disabledDate" @change="pickupStartDate" />
            </div>
            <div class="date-picker-end">
                <span class="date-picker-end-title">至</span>
                <el-date-picker style="width: 160px;" class="date-picker-input" v-model="endDate" type="date"
                    placeholder="请选择截止时间" :size="size" :disabled-date="disabledDate" @change="pickupEndDate" />
            </div>
            <el-button type="primary" @click="queryLoggerClick" class="logger-header-query">查询</el-button>
        </div>

        <el-table 
        :data="tableData" 
        border 
        style="width:95%" 
        empty-text="暂无日志列表数据" 
        :cell-style="{ padding: '5px 0' }"
        >
            <el-table-column prop="orderNum" label="序号" width="70" align="center" />
            <el-table-column prop="username" label="操作账号" width="160" align="center" />
            <el-table-column prop="operate" label="操作内容" width="160" align="center" />
            <el-table-column prop="operateTime" label="操作时间" width="240" align="center" />
            <el-table-column prop="ipAddress" label="操作IP" align="center" />
        </el-table>

        <el-pagination 
        small background 
        layout="prev, pager, next" 
        :total="totalCount" 
        class="mt-4"
        :current-page="currentPage"
        @size-change="change_size" 
        @current-change="change_current" 
        @prev-click="click_prev"
        @next-click="click_next" 
        />
        <div style="height: 100px;"></div>

    </div>
</template>

<style>
.logger-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logger-header h3 {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
    color: var(--el-color-primary);
}

.logger-header-query {
    display: block;
    margin-left: 30px;
}

.date-picker-box {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 20px;
}

.date-picker-start,
.date-picker-end {
    display: flex;
    justify-content: start;
    align-items: center;
}

.date-picker-start-title {
    margin: 0 6px 0 20px;
}

.date-picker-end-title {
    padding: 0 6px;
}


.el-pagination {
    margin: 0 auto;
    margin-top: 30px;
    width: 50%;
}

.el-btn-edit {
    font-size: 14px;
}

.el-btn-edit span {
    color: #555;
}

.el-btn-delete {
    font-size: 12px;
}

.el-btn-delete span {
    color: #c33;
}
</style>